<template>
    <div class="container">
        <Card>
            <!-- 搜索区域 -->
            <div class="search-list">
                <div class="search-item">
                    <div class="item-text">用户昵称</div>
                    <div class="item-input">
                        <Input clearable v-model="queryForm.userNickName" />
                    </div>
                </div>
                <div class="search-item">
                    <div class="item-text">用户姓名</div>
                    <div class="item-input">
                        <Input clearable v-model="queryForm.userRealName" />
                    </div>
                </div>
                <div class="search-item">
                    <div class="item-text">用户电话</div>
                    <div class="item-input">
                        <Input clearable v-model="queryForm.userTelephone" />
                    </div>
                </div>
                <div class="search-item">
                    <div class="item-text">分组ID</div>
                    <div class="item-input">
                        <Select clearable v-model="queryForm.groupId" style="width:186px">
                            <Option v-for="item in areaArry" :value="item.id" :key="item.id">{{ item.groupName }}</Option>
                        </Select>
                    </div>
                </div>
                <div class="search-item">
                    <div class="item-text">等级</div>
                    <div class="item-input">
                        <Select clearable @on-change="changeLevel" style="width:186px">
                            <Option value="0">兼职业务员</Option>
                            <Option value="1">业务员</Option>
                            <Option value="2">主管</Option>
                            <Option value="3">经理</Option>
                            <Option value="4">总监</Option>
                        </Select>
                    </div>
                </div>
                <div class="search-item">
                    <div class="item-text">注册时间</div>
                    <div class="item-input">
                        <DatePicker
                            @on-change="changeTime"
                            clearable
                            :editable="false"
                            type="datetimerange"
                            placement="bottom-end"
                            placeholder="选择时间"
                            style="width: 300px"
                        />
                    </div>
                </div>
                <div class="search-item">
                    <div class="item-text">操作</div>
                    <div class="item-input">
                        <Button
                            size="large"
                            type="primary"
                            @click="searchWorker"
                            >查询经纪人</Button
                        >
                    </div>
                </div>
            </div>
        </Card>
        <Card>
            <!-- 列表区域 -->
            <div class="worker-list">
                <div class="worker-item" v-for="(item,index) in workerArry" :key="item.id">
                    <div class="item">
                        <div class="item-text">Id</div>
                        <div class="item-message">{{ item.id }}</div>
                    </div>
                    <div class="item">
                        <div class="item-text">经纪人</div>
                        <div class="item-message">
                            <div class="message">昵称：{{ item.salesManNickName ? item.salesManNickName : '/'}}</div>
                            <div class="message">电话：{{ item.salesManTelephone ? item.salesManTelephone : '/'  }}</div>
                            <div class="message">姓名：{{ item.salesManRealName ? item.salesManRealName : '/' }}</div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="item-text">上级经纪人</div>
                        <div class="item-message">
                            <div class="message">昵称：{{ item.salesManParentNickName ? item.salesManParentNickName : '/'}}</div>
                            <div class="message">电话：{{ item.salesManParentTelephone ? item.salesManParentTelephone : '/'}}</div>
                            <div class="message">姓名：{{ item.salesManParentRealName ? item.salesManParentRealName : '/' }}</div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="item-text">身份</div>
                        <div class="item-message">{{ item.salesManIdentity | salesManLevelFilter}}</div>
                    </div>
                    <div class="item">
                        <div class="item-text">注册时间</div>
                        <div class="item-message">{{ item.createTime | dateformat}}</div>
                    </div>
                    <div class="item">
                        <div class="item-text">正式员工</div>
                        <div class="item-message">{{ item.belongCompany | belongCompanyFilter}}</div>
                    </div>
                    <div class="item">
                        <div class="item-text">交易数据</div>
                        <div class="item-message">
                            <div class="message">总佣金：{{ item.totalBalance }}</div>
                            <div class="message">当前佣金：{{ item.salesManBalance }}</div>
                            <div class="message">已提现金额：{{ item.cumulativeAmountWithdrawn}}</div>
                            <div class="message">成交量{{ item.transactionQuantity}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </Card>
        <!-- 分页 -->
        <Page :total="total" @on-change="changeNumber" />
    </div>
</template>
<script>
import {areaList,wokerList} from "../../api/business";
export default {
    data(){
        return{
            // 员工查询参数
            queryForm: {
                pageNumber: 1,
                userNickName: '',
                userRealName: '',
                userTelephone: '',
                groupId: null,
                userLevel: null,
                startTime: null,
                endTime: null
            },
            // 区域数组
            areaArry:[],
            // 经纪人数组
            workerArry:[],
            // 经纪人数组总条数
            total:0
        }
    },
    created(){
        areaList().then(res=>{
            console.log(res)
            this.areaArry=res
        })
        this.getworkerArry()
    },
    filters:{
        // 员工身份过滤器
        salesManLevelFilter: function(value) {
            if (value === "0") {
                return '兼职业务员';
            } else if (value === "1") {
                return '业务员';
            } else if (value === "2") {
                return '主管';
            } else if (value === "3") {
                return '经理';
            } else if (value === "4") {
                return '总监';
            }
            return '/';
        },
        // 是否为正式员工
        belongCompanyFilter: function(value) {
            if (value) {
                return '是';
            } else {
                return '否';
            }
        }
    },
    methods:{
        // 选择员工等级
        changeLevel(value){
            console.log(value)
            this.queryForm.userLevel=Number(value)
        },
        getworkerArry(){
            wokerList(this.queryForm).then(res=>{
                console.log(res)
                this.workerArry=res.records
                this.total=res.total
            })
        },
        // 时间选择
        changeTime(value){
            console.log(value);
            this.queryForm.startTime = Date.parse(value[0]);
            this.queryForm.endTime = Date.parse(value[1]);
        },
        // 查询经纪人
        searchWorker(){
            this.getworkerArry()
        },
        // 切换页码
        changeNumber(value){
            console.log(value)
            this.queryForm.pageNumber=value
            this.getworkerArry()

        }
    }
}
</script>
<style lang="less" scoped>
/deep/.ivu-card-body {
  padding: 0;
}
.search-item{
    display: flex;
    align-items: center;
    padding: 0.2rem;
    font-size: 0.28rem;
    .item-text{
        width: 1.5rem;
        font-weight: 600;
    }
}
.ivu-card-bordered {
  margin-bottom: 0.3rem;
}
// 分页
.ivu-page {
  display: flex;
  justify-content: center;
  padding: 0.2rem;
}
// 列表样式
.worker-item:last-child{
  margin-bottom:0;
}
.worker-item {
  background-color: #ccc;
  margin-bottom: 0.15rem;
  padding: 0.2rem;
  font-size: 0.28rem;
  border-radius: 5px;
  .item:last-child {
    border-bottom: none;
  }
  .item {
    display: flex;
    margin: 0.15rem;
    align-items: center;
    border-bottom: 1px solid #fff;
    padding: 0.15rem 0;
    .item-text {
      width: 2.2rem;
      font-weight: 600;
    }
  }
}
.item-message {
  flex: 1;
  button {
    margin:0.2rem;
  }
  .message {
    margin: 0.1rem 0;
  }
}
</style>